<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>产品类别</title>
<script src="../../js/layui/layui.js"></script>
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
		<div class="layui-form-item"
			style="margin-top: 10px; margin-left: 10px">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">产品名:</label>
				<div class="layui-input-inline">
					<input type="text" id="proName" name="catname" placeholder="请输入产品名"
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-inline">
					<button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
				</div>
				<div class="layui-inline">
					<a class="layui-btn layui-btn-normal newsAdd_btn"
						onclick="addProType()">添加产品类型</a>
				</div>
			</form>
		</div>
	</blockquote>
	<table class="layui-table" lay-filter="test" id="demo" lay-filter="table"></table>
	<script type="text/javascript">
		var json;
		layui.use(['table','form','layer'], function(){
		  var table = layui.table;
		  var form = layui.form;
		  var layer = layui.layer;
		  var $ = layui.$;
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 312
		    ,url: 'http://localhost:8080/FiveClothes/productCat/findProType' //数据接口
		    ,page: true //开启分页
		    ,limits:[2,3,4]
		    ,cols: [[ //表头
		      {field: 'productcat_id', title: 'ID', align:'center'}
		      ,{field: 'catname', title: '产品类别名称', align:'center'}
		     /*  ,{field: 'product_id', title: '所属类别', align:'center'} */
		      ,{field: 'right', align:'center',toolbar:'#barDemo',width:200}
		    ]]
		    ,id:'idTest'
		  });
		  
		  form.on('submit(formDemo)', function(data){
			  table.reload('idTest', {
				  where:data.field
				  ,page: {
	                    curr: 1 //重新从第 1 页开始
	                  }
				});
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		  table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			    var data = obj.data; //获得当前行数据
			    var layEvent = obj.event; //获得 lay-event 对应的值
			   
			    if(layEvent === 'del'){ //删除
			     layer.confirm('真的删除行么', function(index){
			    	  $.post('http://localhost:8080/FiveClothes/productCat/delProType',{"id":data.productcat_id},
							  function(res){
			    		  			var msg;
						  			if(res){
						  				msg="删除成功"
						  			}else{
						  				msg="删除失败"
						  				console.log(data.productcat_id);
						  			}
						  			layer.msg(msg, {
							  			  icon: 1,
							  			  time: 2000 //2秒关闭（如果不配置，默认是3秒）
							  			}, function(){
											 window.location.reload();//刷新父页面
							  			}); 
						  			 
						  },'json');
			    	  layer.close(index);
			      });
			    } else if(layEvent === 'edit'){ //编辑
			    	json = JSON.stringify(data);
			    	layer.open({
						 type: 2, 
						 content: 'productTypeUpdate.html',
						 area: ['350px','250px']
					}); 
			    }
			  });
		});
		
		//添加产品类别
		function addProType(){
			layer.open({
			 type: 2, 
			 content: 'productTypeAdd.html',
			 area: ['350px','250px']
			}); 
		}
	 </script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
	</script>
</body>
</html>